<!--添加用户表单-->
<div class="tab_edit">
    <form action="{:Url('insurance_tag_submit')}" method="post" id="insurance_add_submit">
        <input type="hidden" name="insurance_product_id" value="{$insurance_product_id}"/>
        <table width="100%" class="list">
            <tr>
                <td class="t_r t_left_w">请选择标签：</td>
                <td class="t_l">{:widget('common/CheckBox/checkbox',array('insurance_tag_id',array($insurance_tag_list,"insurance_tag_id","insurance_tag_name"),$insurance_tag,true))}</td>
            </tr>
            <tr>
                <td class="t_r t_left_w">自定义标签：</td>
                <td class="t_l">
                    <div class="add_label">
                        {empty name="$insurance_product_info['insurance_ext_tag_str']"}
                        <input type="hidden" name="add_list"/>
                        {else/}
                        <input type="hidden" name="add_list" value="{$insurance_product_info['insurance_ext_tag_str']},"/>
                        {/empty}
                        <div class="add_label_box">
                            {empty name="$insurance_product_info['insurance_ext_tag_str']"}
                            {else/}
                            {foreach name="$insurance_product_info['insurance_ext_tag_ary']" item="info"}
                            <span onclick="det_label(this)">{$info}</span>
                            {/foreach}
                            {/empty}
                        </div>

                        <label id="add_btn">添加标签</label>
                        <label id="add_input">
                            <input name="user_label" type="text"/>
                            <a onclick="seve_label()">保存</a>
                        </label>

                    </div>
                </td>
            </tr>
            <tr>
                <td class="t_r t_left_w"></td>
                <td class="t_l">
                    <div class="btn"><input type="submit" class="but_blue" value="保存信息"></div>
                </td>
            </tr>
        </table>
    </form>
</div>
<style>
    .add_label{
    }
    .add_label .add_label_box{
        display: inline-block;
    }
    .add_label span{
        margin: 10px 0;
        display: inline-block;
        height: 26px;
        padding: 0 30px;
        line-height: 26px;
        text-align: center;
        border: 1px solid #ccc;
        margin-right: 10px;
        position: relative;
        cursor: pointer;
    }
    .add_label span::after{
        content: '×';
        display: block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #ff0000;
        position: absolute;
        right: 2px;
        top: 2px;
    }
    .add_label label{
        display: inline-block;
        height: 26px;
        padding: 0 30px;
        line-height: 26px;
        text-align: center;
        border: 1px solid #ccc;
        margin-right: 10px;
    }
    .add_label label#add_btn{
        border-color: #3b77e3;
        color: #3b77e3;
        cursor: pointer;
    }
    .add_label label#add_input{
        padding: 0;
        border-color: #3b77e3;
        color: #999;
        display: none;
    }
    .add_label label#add_input a{
        display: inline-block;
        background: none;
        border: none;
        background-color: #3b77e3;
        width: 50px;
        text-align: center;
        height: 26px;
        line-height: 26px;
        color: #fff;
        cursor: pointer;
    }
    .add_label label#add_input input{
        height: 22px;
        line-height: 22px;
        position: relative;
        top: -2px;
    }
</style>

<!-- JS处理 -->
<script language="javascript">
    //添加
    $('#add_btn').click(function(){

        //隐藏按钮显示输入框
        $(this).hide().siblings('#add_input').css("display","inline-block");
        //自动聚焦
        $('#add_input input').focus();

    });

    //删除
    function det_label(thas,id){
        //询问框
        layer.confirm('确认删除该标签？', {
            btn: ['确定','取消'] //按钮
        }, function(){

            //取得当前点击的索引
            var index = $(thas).index();

            if(id!=undefined){
                $("input[name=det_list]").val(id+','+$("input[name=det_list]").val());
            }else{
                var add_val = $("input[name=add_list]").val();
                $("input[name=add_list]").val('');
                var add_list = add_val.split(",");
                for(var i in add_list){
                    if(add_list[i]!=$(".add_label_box span").eq(index).html()&&add_list[i]!=""){
                        $("input[name=add_list]").val(add_list[i]+','+$("input[name=add_list]").val());
                    }
                }
            }

            var dom = $(".add_label_box span");
            $(".add_label_box span").eq(index).remove();

            layer.msg('删除成功', {icon: 1});
        }, function(){

        });


    }

    //保存
    function seve_label(){

        var dom = $(".add_label_box");
        var v = $('input[name=user_label]').val();
        if (v == ''){

            alert('标签不能为空')
            return;
        }
        $('input[name=user_label]').val('');
        dom.append("<span onclick='det_label(this)'>"+v+"</span>");

        $("input[name=add_list]").val(v+','+$("input[name=add_list]").val());

        //隐藏按钮显示输入框
        $('#add_input').css("display","none");
        $('#add_btn').show();

    }
</script>